Setup micro frontend using Bit

Install bit


copy
npx @teambit/bvm install

First create a workspace that contains env. We will be using bit with vue.js for the setup. It can be used with other frontend libraries as well.


copy
bit new vue my-workspace --env teambit.vue/vue --default-scope my-org.my-scope

Attached a screenshot of the folder structure after creating workspace and setting up env.

The above setup initialises the workspace. To know more about Bit workspace click here.

Components can be created using templates, as of now bit has 4 vue templates types.

Run the command to check the available templates.


copy
 bit templates

All available vue templates

vue (A vue component template. Can be used for Vue components.)
vue-composable (A vue composable template. Can be used for Vue composables.)
vue-app (A vue application template. Can be used for Vue applications.)
vue-env (A vue env template. Can be used for creating your own Vue env.)

Lets create vue application with name my-app and start the application.


copy
bit create vue-app apps/my-app
bit use apps/my-app // this makes the app lodable in workspace

Start the application using following command

copy

bit run my-app-app

Application name my-app-app can be changed by changing the name property value stored in my-app.vue-app.cjs.

When you run the application you can see a counter present on screen. This is the default code present in the template. Delete the unwanted code and library vue-router to the application.

Run the following command to install vue-router and setup vue router in my-app.

Vue router setup guide


copy
bit deps set apps/my-app "vue-router"

I have setup two routes / and /about. After setup is complete both routes should work properly.

Routing is successfully setup if you are able to navigate on different routes.

Create common state management for all apps.

Add pinia as dependency for common/store.

Install pinia


copy
bit create vue-composable common/store
bit deps set common/store "pinia"  
bit install

After successfull installation setup pinia.

Go to store.ts in common/store delete all the code from this file and paste below code. This will provide pinia instance to all the applications.


copy
import { createPinia } from "pinia";

export const pinia = createPinia();

To setup pinia in application go to the apps/my-app/my-app.root.ts and add the following code.


copy
import { createApp } from "vue";
import App from "./my-app.vue";

import router from './router'
import {pinia} from "@my-org/my-scope.common.store";

const app = createApp(App)

app.use(pinia)
app.use(router)
app.mount("#app");

Add routing to the main vue file, go to my-app.vue file and paste the following code.


copy
<script setup>
import { RouterLink, RouterView } from 'vue-router'

</script>

<template>
  <header>
      <nav>
        <RouterLink style="margin-right: 10px;" to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
  </header>
  <RouterView />
</template>

Create a counter store in common/store/counter.js


copy
import { defineStore } from "pinia";
import { ref } from "vue";

export const useCounter = defineStore("counter", () => {
  const count = ref(0);
  function inc() {
    count.value++;
  }

  return { count, inc };
});

Import the store in any app file to test updating values in store, I will import it in apps/my-app/views/HomeView.vue


copy
<script setup>
import { useCounter } from '@my-org/my-scope.common.store/counter'

const counter = useCounter()
</script>

<template>
      {{counter.count}}
  <button @click="counter.inc">click</button>
    <div>
        <p>This is home screen {{count}} {{name}}</p>
    </div>
</template>

After successfull import start the project.


copy
bit run my-app-app

You will see a screen like this. if the value displayed is reactive when clicked on button you have successfully setup pinia in your app.

Create another vue application, setup pinia in it and run the application. A common store being accessed by two applications.


copy
bit create vue-app apps/my-task
bit use apps/my-task

apps/my-task/my-task.root.ts


copy
import { createApp } from "vue";
import App from "./my-task.vue";
import { pinia } from "@my-org/my-scope.common.store";

const app = createApp(App);

app.use(pinia);
app.mount("#app");

apps/my-task/my-task.vue


copy
<script setup>
import { useCounter } from '@my-org/my-scope.common.store/counter'

const counter = useCounter()
</script>

<template>
      {{counter.count}}
  <button @click="counter.inc">click</button>
    <div>
        <p>This is task screen {{count}} {{name}}</p>
    </div>
</template>

run the application


copy
bit run my-task-app

One common store is shared between two different applications my-app and my-task.

Link to code